import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('图片组件image,本地图片，在线图片')),
        body: Column(
          children: [
            MyImage(),
            SizedBox(height: 40, child: Text('------Container实现圆形图片---')),
            MyCircuar(),
            SizedBox(height: 40, child: Text('ClipOval实现圆形图片')),
            MyClipOval(),
            SizedBox(height: 40, child: Text('CircleAvatar实现圆形图片')),
            MyAssets(),
            SizedBox(height: 40, child: Text('加载本地图片')),
          ],
        ),
      ),
    ),
  );
}

//网络图片
//https://ts1.tc.mm.bing.net/th/id/OIP-C.0-k88KZFA1gBPN10x9HAYQHaFN?rs=1&pid=ImgDetMain&o=7&rm=3

class MyImage extends StatelessWidget {
  const MyImage({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        // alignment: Alignment.bottomCenter,
        height: 200,
        width: 200,
        decoration: BoxDecoration(color: Colors.pink[100]),
        child: Image.network(
          'https://ts1.tc.mm.bing.net/th/id/OIP-C.0-k88KZFA1gBPN10x9HAYQHaFN?rs=1&pid=ImgDetMain&o=7&rm=3',
          // fit: BoxFit.cover,//图片缩放模式
          // repeat: ImageRepeat.repeat,//平铺
          // scale: 2.0,//缩放比例
          // alignment: Alignment.centerLeft,//控制图片位置
        ), //网络图片
      ),
    );
  }
}

//Container实现圆形图片
class MyCircuar extends StatelessWidget {
  const MyCircuar({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      // margin: EdgeInsets.fromLTRB(0, 60, 0, 0),
      height: 150,
      width: 150,
      decoration: BoxDecoration(
        color: Colors.pink,
        borderRadius: BorderRadius.circular(75),
        image: DecorationImage(
          image: NetworkImage(
            'https://ts1.tc.mm.bing.net/th/id/OIP-C.0-k88KZFA1gBPN10x9HAYQHaFN?rs=1&pid=ImgDetMain&o=7&rm=3',
          ),
          fit: BoxFit.fill,
        ),
      ),
    );
  }
}

// ClipOval实现圆形图片
class MyClipOval extends StatelessWidget {
  const MyClipOval({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ClipOval(
        child: Image.network(
          'https://ts1.tc.mm.bing.net/th/id/OIP-C.0-k88KZFA1gBPN10x9HAYQHaFN?rs=1&pid=ImgDetMain&o=7&rm=3',
          width: 150,
          height: 150,
          fit: BoxFit.cover,
        ),
      ),
    );
  }
}

//本地图片
class MyAssets extends StatelessWidget {
  const MyAssets({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 150,
      height: 150,
      decoration: BoxDecoration(
        color:Colors.yellow[200],
        image: DecorationImage(
          image:AssetImage('images/kun.webp'),
          fit: BoxFit.cover
        )
      ),
      // child: Image.asset(
      //   'images/kun.webp',
      //   fit: BoxFit.cover,
      // ),
    );
  }
}
